<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子元素过滤选择器示例-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 70px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }
    div.visible {
      display: none;
    }
  </style>
  <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      // 2. 每个class为one的div父元素下的第2个子元素.
      $("#b1").click(function () {
        $("div .one:nth-child(2)").css("background","green")
      })
      // 3. 每个class为one的div父元素下的第一个子元素
      $("#b2").click(function () {
        $("div .one:nth-child(1)").css("background","green")
      })
      // 4. 每个class为one的div父元素下的最后一个子元素
      $("#b3").click(function () {
        $("div .one:last-child").css("background","green")
      })
      // 5. 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
      $("#b4").click(function () {
        $("div .one:only-child").css("background","green")
      })
    })
  </script>
</head>
<body>
<input type="button" value="每个 class 为 one 的 div 父元素下的第 2 个子元素" id="b1"/><br/><br/>
<input type="button" value="每个 class 为 one 的 div 父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value=" 每 个 class 为 one 的 div 父 元 素 下 的 最 后 一 个 子 元 素 "
       id="b3"/><br/><br/>
<input type="button" value="如果 class 为 one 的 div 父元素下的仅仅只有一个子元素，那么选中这
个子元素" id="b4"/><br/><br/>
<div class="one">
  <div id="one" class="one">
    XXXXXXXXX id=one
  </div>
  <div id="two" class="one">
    XXXXXXXXX id=two
  </div>
  <div id="three" class="one">
    XXXXXXXXX id=three
  </div>
  <div id="four" class="one">
    XXXXXXXXX id=four
  </div>
</div>
<div class="one">
  <div id="five" class="one">
    XXXXXXXXX id=five
  </div>
</div>
</body>
</html>